<style>
    body {
        background: #fff;
    }

    .content {
        padding: 10vh 0;
        text-align: center;
    }

    .icon {
        font-size: 120px;
        text-align: center;
        text-shadow: 10px 10px 20px #0000001a;
    }

    .msg {
        text-align: center;
        margin-top: 10px;
    }

    .footer {
        bottom: 15vh;
        position: fixed;
        width: 100%;
        text-align: center;
        max-width: 750px;
    }

    .footer p {
        display: block;
        width: 100%;
        font-size: 14px;
        color: #969799;
    }

    .btn {
        width: 60%;
        margin: 20px auto;
    }
</style>
<div id="app">
    <div class="content">
        <div class="icon">
            <van-icon :name="data.icon.name" :style="{color: data.icon.color}" v-if="data.icon"></van-icon>
            <img :src="data.icon_url" height="120px" v-else alt="" style="margin-bottom: 20px">
        </div>
        <div class="msg">
            <p :style="{fontSize:config.msg_size}">{{data.msg}}</p>
            <p style="margin-top: 10px;font-size: 14px;color: #666">{{config.detailed}}</p>
        </div>
        <div class="footer" v-if="config.show_btn">
            <div class="btn">
                <van-button type="primary" round block :loading="jump" :loading-text="config.jumping" @click="goto()"
                            :color="data.icon?data.icon.color:''">
                    {{config.jump_now}}
                </van-button>
            </div>
            <p v-if="!jump && this.config.auto_jump">{{second}}{{config.read_second}}</p>
            <p v-else>&nbsp;</p>
        </div>
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            data: JSON.parse('{$data|raw}'),
            config: JSON.parse('{$config|raw}'),
            second: 5,
            jump: false
        },
        mounted() {
            this.second = this.config.second || 5;
            this.init();
        },
        methods: {
            init() {
                if (this.config.auto_jump > 0 && this.config.show_btn) {
                    setInterval(() => {
                        this.second--
                        if (this.second === 0) {
                            this.goto()
                        }
                    }, 1000)
                }
            },
            goto() {
                this.jump = true
                dk.to(this.data.url)
            }
        }
    })
</script>
